<template>
  <el-form ref="form" :model="form" label-width="120px" >
    <el-form-item :label="`${$t('toolingBarcode')}`">
      <el-input v-model="form.toolingBarcode" />
    </el-form-item>
    <el-form-item
      v-for="item in formList"
      :key="item.id"
      :label="item.itemName"
    >
      <!-- 数字或者小数 -->
      <template v-if="item.dataType === 1 || item.dataType === 10">
        <el-input
          v-model="item.itemValue"
          onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
        />
      </template>
      <!-- 文本 -->
      <template v-if="item.dataType === 2">
        <el-input v-model="item.itemValue" />
      </template>
      <!-- 布尔值 -->
      <template v-if="item.dataType === 3">
        <el-switch
          v-model="item.itemValue"
          active-value="1"
          inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="getFormResult(item)"
        />
        <el-alert
          v-show="item.result === 0 && item.itemValue"
          :closable="false"
          :title="item.itemName + '结果验证失败'"
          style="padding: 0 8px; marginTop: 10px"
          type="error"
        />
      </template>
      <!-- 单选列表-->
      <template v-if="item.dataType === 4">
        <el-select v-model="item.itemValue" @change="getFormResult(item)">
          <el-option
            v-for="citem in item.dataSource.split(',')"
            :key="citem"
            :label="citem"
            :value="citem"
          />
        </el-select>
        <el-alert
          v-show="item.result === 0 && item.itemValue"
          :closable="false"
          :title="item.itemName + '结果验证失败'"
          style="padding: 0 8px; marginTop: 10px"
          type="error"
        />
      </template>
      <!-- 多选列表 -->
      <template v-if="item.dataType === 5">
        <el-select v-model="item.itemValue" multiple>
          <el-option
            v-for="citem in item.dataSource.split(',')"
            :key="citem"
            :label="citem"
            :value="citem"
          />
        </el-select>
      </template>
      <!-- 单选勾选 change事件-->
      <template v-if="item.dataType === 6">
        <el-radio
          v-for="citem in item.dataSource.split(',')"
          :key="citem.id"
          v-model="item.itemValue"
          :label="citem"
          @change="getFormResult(item)"
        >{{ citem }}</el-radio
        >
        <el-alert
          v-show="item.result === 0 && item.itemValue"
          :closable="false"
          :title="item.itemName + '结果验证失败'"
          style="padding: 0 8px; marginTop: 10px"
          type="error"
        />
      </template>
      <!-- 多选勾选 -->
      <template v-if="item.dataType === 7">
        <el-checkbox
          v-for="(citem, index) in item.dataSource.split(',')"
          :key="index"
          v-model="item.itemValue"
        >{{ citem }}</el-checkbox
        >
        <el-alert
          v-show="item.result === 0 && item.itemValue"
          :closable="false"
          :title="item.itemName + '结果验证失败'"
          style="padding: 0 8px; marginTop: 10px"
          type="error"
        />
      </template>
      <!-- 数字 -->
      <template v-if="item.dataType === 8">
        <el-input v-model="item.itemValue" />
      </template>
      <!-- 文件 -->
      <template v-if="item.dataType === 9">
        <el-upload
          :headers="headers"
          :action="updateAvatarApi"
          :limit="1"
          :file-list="fileList"
          :on-success="uploadSuccess"
          multiple
        >
          <el-button

            type="primary"
            @click="setCurrentVal(item)"
          >{{ this.$t('upload') }}</el-button
          >
        </el-upload>
      </template>
      <!-- 是否上传附件 -->
      <div v-if="item.attachment" class="upload-attachments">
        <el-upload
          :headers="headers"
          :action="updateAvatarApi"
          :limit="1"
          :file-list="fileList"
          :on-success="uploadAttachments"
          multiple
        >
          <el-button

            type="primary"
            @click="setCurrentVal(item)"
          >{{ this.$t('upload') }}</el-button
          >
        </el-upload>
      </div>
    </el-form-item>
    <el-row class="btn-row">
      <el-col :span="24" :offset="18">
        <el-button

          type="primary"
          icon="el-icon-receiving"
          @click="doSave"
        >{{ $t("save") }}</el-button
        >
        <el-button icon="el-icon-delete">{{
          $t("reset")
        }}</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import toolingChecklistApi from '@/api/Tooling/toolingChecklist'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import networkTips from '@/mixins/networkTips'
import toolingCheckApi from '@/api/Tooling/toolingChecklist'
export default {
  name: 'GenerateForm',
  mixins: [networkTips],
  props: {
    formValue: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {},
      formList: [],
      headers: {
        Token: getToken()
      },
      fileList: [],
      currentItem: null,
      showError: false
    }
  },
  computed: {
    ...mapGetters(['user', 'updateAvatarApi', 'baseApi'])
  },
  watch: {},
  created() {
    this.getGenerateForm()
  },
  mounted() {},
  methods: {
    // 保存
    doSave() {
      this.$notify.closeAll()
      if (this.formList.every((ele) => ele.itemValue)) {
        toolingCheckApi
          .doSave({ ...this.form, toolingFormItemList: this.formList })
          .then((res) => {
            this.netTips(res)
          })
      } else {
        const listVNode = this.formList
          .filter((ele) => !ele.itemValue || ele.itemValue.length === 0)
          .map((e, i) => {
            return (
              <p>
                {i + 1}:{e.itemName}--未填写!
              </p>
            )
          })
        const h = this.$createElement
        this.$notify({
          title: '请完善表格填写',
          duration: 0,
          message: h('div', { style: 'color: teal' }, listVNode)
        })
      }
    },
    // 初始化表单
    getGenerateForm() {
      this.form = this.formValue
      toolingCheckApi
        // .doGenerate({
        //   toolingBarcode: this.formValue.toolingBarcode,
        //   toolingType: this.formValue.toolingType,
        //   toolingModel: this.formValue.toolingModel,
        //   type: this.formValue.type
        //   // formId: this.formValue.formId,
        //   // toolingBarcode: this.formValue.toolingBarcode
        // })
        .doGenerate(this.formValue)
        .then((res) => {
          this.formList = res.data.itemList
          this.form.prefix = res.data.formPrefix
        })
    },
    // 验证表单结果
    async getFormResult(item) {
      if (item.isCheck) {
        const res = await toolingChecklistApi.getFormResult({
          itemId: item.id,
          itemValue: item.itemValue
        })
        if (res.data) {
          this.showError = false
          item.result = res.data.result
          item.judgeReason = res.data.judgeReason
        } else {
          item.result = res.data.result
          item.judgeReason = res.data.judgeReason
          this.showError = true
        }
      }
    },
    // 附件上传
    uploadAttachments(response) {
      this.formList.find((ele) => {
        if (ele.id === this.currentItem.id) {
          ele.attachmentPath = response.data
        }
      })
    },
    // w文件上传成功
    uploadSuccess(response) {
      this.formList.find((ele) => {
        if (ele.id === this.currentItem.id) {
          ele.itemValue = response.data
        }
      })
    },
    setCurrentVal(val) {
      this.currentItem = val
    }
  }
}
</script>

<style scoped lang="scss">
.el-form-item {
  ::v-deep .el-form-item__label {
    overflow: hidden;
    word-break: break-all;
    white-space: normal;
  }
  .el-form-item__content div {
    width: 40%;
  }
}
.upload-attachments{
  display: inline-block;
  div{
    display: flex;
    align-items: center;
  }
}
</style>
